<!-- 个人会员-所属机构/团体 -->
<template>
  <div>
    <div class="gl_px_15">
      <div class="gl_mt_15">
        <el-table ref="memberTable" v-loading="loading" :data="groupList" size="mini">
          <el-table-column type="index" label="序号" />
          <el-table-column label="机构">
            <template slot-scope="{row}">
              <span v-if="!row.delegation || !row.delegation.name">- -</span>
              <span v-else>{{ row.delegation.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="地址">
            <template slot-scope="{row}">
              <span v-if="!row.delegation || !row.delegation.provinceCode">- -</span>
              <span v-else>{{ row.delegation.provinceCode }}-{{ row.delegation.cityCode }}-{{ row.delegation.countyCode }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型">
            <template slot-scope="{row}">
              <span v-if="!row.delegation || !row.delegation.delegationType">- -</span>
              <span v-else>{{ row.delegation.delegationType }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <el-row class="gl_pt_20" style="text-align: center;">
        <el-pagination
          :current-page="Api_GET_EventsManagementRegisterIdQO.Page"
          :page-size="Api_GET_EventsManagementRegisterIdQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row> -->
    </div>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementRegisterId
} from '@/extend/api/gameswaggerApi/app.js';
import {
  Api_GET_EventsManagementRegisterIdQO
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'Mechanism',
  props: {
    isShow: {
      type: Boolean
    }
  },
  data() {
    return {
      loading: false,
      Api_GET_EventsManagementRegisterIdQO: new Api_GET_EventsManagementRegisterIdQO(),
      currentPage: 1,
      totalPage: 0, // 分页总条目数
      groupList: [] // 表格数据
    };
  },
  watch: {
    isShow: {
      handler: function(val) {
        if (val) {
          this.groupList = [];
          this.getGroup();
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 获取所属团体
    getGroup(page) {
      this.loading = true;
      // this.Api_GET_EventsManagementRegisterIdQO.Page = page || 1;
      // this.Api_GET_EventsManagementRegisterIdQO.SkipCount = (this.Api_GET_EventsManagementRegisterIdQO.Page - 1) * this.Api_GET_EventsManagementRegisterIdQO.MaxResultCount;
      const data = this.Api_GET_EventsManagementRegisterIdQO;
      data.IncludeDelegation = true;
      api_GET_EventsManagementRegisterId(this.$route.query.id, data).then(res => {
        this.groupList.push(res);
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    }
    // sizeChange: function(MaxResultCount) {
    //   this.Api_GET_EventsManagementRegisterIdQO.MaxResultCount = MaxResultCount;
    //   this.getGroup();
    // },
    // pageIndexChange(currentPage) {
    //   this.getGroupList(currentPage);
    // }
  }
};
</script>

<style scoped>
.box {
  width: 410px;
  height: 190px;
  display: inline-block;
  margin-left: 51px;
  margin-top: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.09);
}
.content_top {
  width: 410px;
  height: 150px;
  padding: 20px;
}
img {
  border: 1px solid #848484;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  overflow: hidden;
}
.text_box {
  line-height:40px
}
.text {
  font-size:14px;
  color:#848484;
}
.button {
  width: 100%;
  height: 40px;
}
</style>
